<template>
  <el-row>
    <el-form ref="form" label-width="140px" :model="fu" size="small" class="fu" :rules="rules" :disabled="disabled === -200 ? false : true">
      <el-form-item label="通道状态：">
        <span class="fz12" :class="enter_status < 0 ? 'err' : 'tip'">{{ enter_info }}</span>
      </el-form-item>
      <el-form-item label="错误信息：" v-if="enter_status < 0">
        <span class="fz12 err">{{ error_info }}</span>
      </el-form-item>
      <el-form-item label="联系地址：" prop="area">
        <el-cascader :options="address" class="w240"  v-model="fu.area" :props="props" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input class="w240" v-model="fu.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="商户邮箱号：" prop="login_email">
        <el-input class="w240" v-model="fu.login_email" placeholder="请填写未进件过富民通道的邮箱"></el-input>
      </el-form-item>
      <el-form-item label="商户手机号：" prop="login_phone">
        <el-input class="w240" v-model="fu.login_phone" maxlength="11" placeholder="请填写未进件过富民通道的手机号"></el-input>
      </el-form-item>
      <el-form-item label="结算周期：">
        <el-button size="mini" type="warning">T+1</el-button>
      </el-form-item>
      <el-form-item label="支付功能：" prop="need_channel">
        <el-checkbox-group class="fz12" v-model="fu.need_channel">
          <el-checkbox class="fz12" v-for="item in needChannels" :key="item.key" :label="item.key" :disabled="item.disabled">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="上传图片：" prop="ch_fumin_canyin_plat">
        <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleUploadPlat">
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <img v-if="fu.ch_fumin_canyin_plat" :src="fu.ch_fumin_canyin_plat" alt="">
          <span class="fz12"><span class="err">*</span>餐饮平台入驻证明截图</span>
        </el-upload>
      </el-form-item>
      <el-row>
        <span style="margin: 0 0 10px 20px;">微信通道</span>
        <el-form-item label="参加绿洲计划：">
          <el-switch active-color="#13ce66" v-model="fu.is_green" @change="handleChangeGreen"></el-switch>
        </el-form-item>
        <el-form-item label="经营类别：" multiple prop="wx_category" v-if="fu.is_green">
          <el-select v-model="fu.wx_category" placeholder="" class="w200">
            <el-option v-for="item in wxCatgroy"
              :key="item.category_code"
              :label="item.leve_1 + '/' + item.level_2 + '/' + item.level_3"
              :value="item.category_code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约费率：" prop="wx_rate" v-if="fu.is_green">
          <el-input class="w200" disabled v-model.number="fu.wx_rate" :maxlength="4"></el-input>%
        </el-form-item>
        <el-row v-if="fu.is_green">
          <label class="el-form-item__label" style="width: 140px;"><span class="err">*</span>补充材料：</label>
            <el-form-item style="display: inline-block;" class="mr10" prop="ch_fumin_canyin_appoint" label-width="0">
              <el-upload class="uploader" :action="url" :before-upload="beforeUpload" :on-success="handleUploadeBusiness" :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="fu.ch_fumin_canyin_appoint" :src="fu.ch_fumin_canyin_appoint" alt="">
                <span class="fz12"><span class="err">*</span>指定餐饮平台照片</span>
              </el-upload>
            </el-form-item>
            <el-form-item style="display: inline-block;" class="mr10" prop="ch_fumin_face" label-width="0">
              <el-upload class="uploader" :action="url" :before-upload="beforeUpload" :on-success="handleUploadFace" :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="fu.ch_fumin_face" :src="fu.ch_fumin_face" alt="">
                <span class="fz12"><span class="err">*</span>BD与商户门头合照</span>
              </el-upload>
            </el-form-item>
            <el-form-item style="display: inline-block;" class="mr10" label-width="0" prop="ch_fumin_activity">
              <el-upload class="uploader" :action="url" :before-upload="beforeUpload" :on-success="handleUploadActivity" :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="fu.ch_fumin_activity" :src="fu.ch_fumin_activity" alt="">
                <span class="fz12"><span class="err">*</span>BD与店内活动物料合照</span>
              </el-upload>
            </el-form-item>
            <el-form-item style="display: inline-block;" class="mr10" label-width="0" prop="ch_fumin_green_counter">
              <el-upload class="uploader" :action="url" :before-upload="beforeUpload" :on-success="handleUploadGreenCounter" :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <img v-if="fu.ch_fumin_green_counter" :src="fu.ch_fumin_green_counter" alt="">
                <span class="fz12"><span class="err">*</span>收银台照片</span>
              </el-upload>
            </el-form-item>
        </el-row>
      </el-row>
      <el-row>
        <span style="margin: 0 0 10px 20px;">支付宝通道</span>
        <el-form-item label="参加蓝海行动：">
          <el-switch active-color="#13ce66" v-model="fu.is_blue" @change="handleChangeBlue"></el-switch>
        </el-form-item>
        <el-form-item label="经营类别：" prop="ali_category" v-if="fu.is_blue">
          <el-select v-model="fu.ali_category" placeholder="" class="w200">
            <el-option v-for="item in aliCategroy"
              :key="item.category_id"
              :label="item.category_name"
              :value="item.category_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约费率：" prop="ali_rate" v-if="fu.is_blue">
          <el-input class="w200" disabled v-model.number="fu.ali_rate" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="上传图片：" prop="ch_fumin_blue_counter" v-if="fu.is_blue">
          <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleUploadBlueCounter">
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <img v-if="fu.ch_fumin_blue_counter" :src="fu.ch_fumin_blue_counter" alt="">
            <span class="fz12"><span class="err">*</span>收银台照片</span>
          </el-upload>
        </el-form-item>
      </el-row>
      <el-form-item v-if="disabled === -200">
        <el-button type="primary" size="small" @click="handleClickOnSubmit" :loading="btnSubmit">提交审核</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
import { merchantChannelFuActivityQuery, merchantChannelFuActivityUpdate } from '@/api/shop'
import { validateEmail, validatePhone } from '@/utils/validate'

export default {
  data() {
    const VALIDPHONE = (rules, value, callback) => {
      if (validatePhone(value)) {
        callback()
      } else {
        callback(new Error('手机号码格式不对哦~'))
      }
    }
    const VALIDEMAIL = (rules, value, callback) => {
      if (validateEmail(value)) {
        callback()
      } else {
        callback(new Error('邮箱格式不对哦~'))
      }
    }
    return {
      btnSubmit: false,
      disabled: 100,
      options: [],
      enter_status: null,
      enter_info: null,
      error_info: '',
      needChannels: [],
      props: {
        value: 'code',
        label: 'alias',
        children: 'city'
      },
      fu: {
        area: [],
        address: '',
        wx_category: '',
        login_phone: '',
        login_email: '',
        wx_rate: 0,
        ali_rate: 0,
        ali_category: '',
        is_green: false,
        is_blue: false,
        ch_fumin_face: '',
        ch_fumin_activity: '',
        ch_fumin_canyin_plat: '',
        ch_fumin_blue_counter: '',
        ch_fumin_green_counter: '',
        ch_fumin_canyin_appoint: '',
        need_channel: []
      },
      rules: {
        area: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        wx_category: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        ali_category: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        need_channel: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        address: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        login_email: [{ required: true, trigger: 'blur', validator: VALIDEMAIL }],
        login_phone: [{ required: true, trigger: 'blur', validator: VALIDPHONE }],
        ali_rate: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        wx_rate: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        ch_fumin_face: [{ required: true, trigger: 'change', message: '请上传图片' }],
        ch_fumin_business: [{ required: true, trigger: 'change', message: '请上传图片' }],
        ch_fumin_activity: [{ required: true, trigger: 'change', message: '请上传图片' }],
        ch_fumin_blue_counter: [{ required: true, trigger: 'change', message: '请上传图片' }],
        ch_fumin_green_counter: [{ required: true, trigger: 'change', message: '请上传图片' }],
        ch_fumin_canyin_plat: [{ required: true, trigger: 'change', message: '请上传图片' }]
      },
      url: process.env.BASE_API + '/merchant/uploadCommer'
    }
  },
  props: {
    address: {
      required: true,
      type: Array
    },
    wxCatgroy: {
      required: true,
      type: Array
    },
    aliCategroy: {
      required: true,
      type: Array
    }
  },
  methods: {
    handleClickOnSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnSubmit = true
          merchantChannelFuActivityUpdate(this.$route.query.merchant_num, this.fu).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.disabled = 100
              this.btnSubmit = false
            } else {
              this.$message.error(res.data.errorMsg)
              this.btnSubmit = false
            }
          })
        }
      })
    },
    handleChangeGreen(v) {
      const GREENNEED = [{ key: 56, disabled: true, label: '微信（绿洲计划）条码支付' }, { key: 55, disabled: true, label: '微信（绿洲计划）扫码支付' }, { key: 57, disabled: true, label: '微信（绿洲计划）公众号支付' }, { key: 58, disabled: true, label: '微信（绿洲计划）小程序支付' }]
      if (v) {
        GREENNEED.map(item => {
          this.needChannels.push(item)
          this.fu.need_channel.push(item.key)
        })
      } else {
        GREENNEED.map(item => {
          const INDEX = this.needChannels.map(i => i.key).indexOf(item.key)
          if (INDEX !== -1) {
            this.needChannels.splice(INDEX, 1)
            this.fu.need_channel.splice(this.fu.need_channel.indexOf(item.key), 1)
          }
        })
        this.fu.wx_rate = 0
        this.fu.ch_fumin_business = ''
        this.fu.ch_fumin_canyin_plat = ''
        this.fu.ch_fumin_activity = ''
        this.fu.ch_fumin_face = ''
      }
    },
    handleChangeBlue(v) {
      const BLUE = [
        { key: 1, disabled: true, label: '支付宝扫码支付' },
        { key: 2, disabled: true, label: '支付宝条码支付' },
        { key: 3, disabled: true, label: '支付宝一码多付' }
      ]
      if (v) {
        BLUE.map(item => {
          this.needChannels.push(item)
          this.fu.need_channel.push(item.key)
        })
      } else {
        BLUE.map(item => {
          const INDEX = this.needChannels.map(i => i.key).indexOf(item.key)
          if (INDEX !== -1) {
            this.needChannels.splice(INDEX, 1)
            this.fu.need_channel.splice(this.fu.need_channel.indexOf(item.key), 1)
          }
        })
        this.fu.ali_rate = 0
        this.fu.ali_category = ''
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    handleUploadeBusiness(file) {
      this.fu.ch_fumin_canyin_appoint = file.result
    },
    handleUploadFace(file) {
      this.fu.ch_fumin_face = file.result
    },
    handleUploadGreenCounter(file) {
      this.fu.ch_fumin_green_counter = file.result
    },
    handleUploadBlueCounter(file) {
      this.fu.ch_fumin_blue_counter = file.result
    },
    handleUploadActivity(file) {
      this.fu.ch_fumin_activity = file.result
    },
    handleUploadPlat(file) {
      this.fu.ch_fumin_canyin_plat = file.result
    }
  },
  created() {
    merchantChannelFuActivityQuery(this.$route.query.merchant_num).then(res => {
      if (res.data.errorCode === 0) {
        if (res.data.result.is_green === 0) {
          this.fu.is_green = false
        } else {
          this.fu.is_green = true
        }
        if (res.data.result.is_blue === 0) {
          this.fu.is_blue = false
        } else {
          this.fu.is_blue = true
        }
        this.handleChangeGreen(this.fu.is_green)
        this.handleChangeBlue(this.fu.is_blue)
        this.fu.area = res.data.result.area.code
        this.fu.address = res.data.result.address
        this.fu.login_email = res.data.result.login_email
        this.fu.login_phone = res.data.result.login_phone
        this.fu.wx_rate = Number(res.data.result.wx_rate)
        this.fu.ali_rate = Number(res.data.result.ali_rate)
        this.fu.wx_category = res.data.result.wx_category.code
        this.fu.ali_category = res.data.result.ali_category.code
        this.disabled = res.data.result.channel_status
        this.enter_status = res.data.result.enter_status.code
        this.enter_info = res.data.result.enter_status.name
        this.error_info = res.data.result.enter_status.error_info
        this.fu.ch_fumin_face = res.data.result.photos.ch_fumin_face
        this.fu.ch_fumin_activity = res.data.result.photos.ch_fumin_activity
        this.fu.ch_fumin_canyin_plat = res.data.result.photos.ch_fumin_canyin_plat
        this.fu.ch_fumin_blue_counter = res.data.result.photos.ch_fumin_blue_counter
        this.fu.ch_fumin_green_counter = res.data.result.photos.ch_fumin_green_counter
        this.fu.ch_fumin_canyin_appoint = res.data.result.photos.ch_fumin_canyin_appoint
      } else {
        this.disabled = -200
      }
    })
  }
}
</script>